<template>
  <div class="detail">
    <!-- 吸顶动画 -->
    <header>
        <div class="header-return" v-show="isShow">
            <i class="iconfont icon-fanhui" @click="goBack"></i>
            <i class="iconfont icon-24gl-thumbsUp2"></i>
        </div>
        <div 
            class="header-bar" v-show="!isShow"
            :style="styleOption"
        >
            <i class="iconfont icon-fanhui" @click="goBack"></i>
            <div>
                <span>商品详情</span>
                <span>商品评价</span>
            </div>
            <i class="iconfont icon-24gl-thumbsUp2"></i>
        </div>
    </header>


    <section ref="wrapper">
        <div>
            <!-- swiper轮播部分 -->
            <div class="swiper-main">
                <swiper :options="swiperOption">
                <swiper-slide 
                    v-for='(item,index) in swiperList' 
                    :key='index'
                >
                    <img :src="item.imgUrl" alt="">
                </swiper-slide>
                </swiper>
                <div class="swiper-pagination"></div> 
            </div>

            <!-- title标题部分 -->
            <div class="goods-name">
                <h1>{{goods.name}}</h1>
                <div>性价首选，茶感十足、鲜醇耐泡的大众口粮茶</div>
            </div>

            <!-- title内容部分 -->
            <div class='goods-price'>
                <div class='oprice'>
                    <span>¥</span>
                    <b>{{goods.price}}</b>
                </div>
                <div class='pprice'>
                    <span>价格:</span>
                    <del>¥{{goods.price}}</del>
                </div>
                <div>
                    <img style="width: 100%; height: 400px;" :src="goods.imgUrl" alt="">
                    <img style="width: 100%; height: 400px;" :src="goods.imgUrl" alt="">
                    <img style="width: 100%; height: 400px;" :src="goods.imgUrl" alt="">
                    <img style="width: 100%; height: 400px;" :src="goods.imgUrl" alt="">
                </div>
            </div>
        </div>
    </section>
    

    <!-- 购物车部分 -->
    <footer>
        <ul class="footer-left">
            <li>
                <i class="iconfont icon-kefu"></i>
                <span>客服</span>
            </li>
            <li>
                <i class="iconfont icon-gouwuche"></i>
                <span>购物车</span>
            </li>
            <li>
                <i class="iconfont icon-shoucang"></i>
                <span>收藏</span>
            </li>
        </ul>
        <div class="footer-right">
            <div @click="addCart">加入购物车</div>
            <div>立即购买</div>
        </div>
    </footer>

  </div>
</template>

<script>
import http from '@/common/api/request.js'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import BetterScroll from 'better-scroll'
import { Toast } from 'mint-ui';
export default {
  name: 'Detail',
  data(){
    return{
        goods: {},
        styleOption: {},
		swiperOption: {     //swiper3
			autoplay: 3000,
			speed: 1000,
			pagination: {
				el: '.swiper-pagination',
                type: 'fraction'
			}
		},
        swiperList: [
            {
                imgUrl: './images/goods1.jpg'
            },
            {
                imgUrl: './images/goods1.jpg'
            },
            {
                imgUrl: './images/goods1.jpg'
            }
        ],
        isShow: true,
        bBetterScrollnew: '',
        id: 0
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted() {
    this.bBetterScrollnew  = BetterScroll(this.$refs.wrapper, {
        probeType: 3,
        click: true,
        bounce: false
    })
    this.bBetterScrollnew.on('scroll', (pos)=>{
        let posY = Math.abs(pos.y)
        
        let opacity = posY / 180
        console.log(opacity)
        opacity = opacity > 1 ? 1 : opacity
        this.styleOption = {
            opacity: opacity
        }
        if(posY >= 50) {
            this.isShow = false
        } else {
            this.isShow = true
        }
    })
  },
  created() {
    this.id = this.$route.query.id;
    this.getData()
  },
  activated() {
    //判断当前url , id和之前id是否一致
		if(  this.$route.query.id != this.id ){
			this.getData();
			this.id = this.$route.query.id;
		}
  },
  methods: {
   async getData() {
        let id = this.$route.query.id

        let res = await http.$axios({
            url: '/api/goods/id',
            params: {
                id
            }
        })
        this.goods = res
    },
    // 返回上一页
    goBack() {
        this.$router.back()
    },
    addCart() {

        let id = this.$route.query.id
        http.$axios({
            url:'/api/addCart',
            method:"post",
            data:{
                goodsId:id
                
            },
            headers:{
                token:true
            }
        }).then(res=>{
            
            if(res.success) {
                Toast('添加购物车成功');
            }

        })

    }
  }
}
</script>

<style>
    .detail {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    section {
        flex: 1;
        overflow: hidden;
    }
    header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 1.2rem;
        z-index: 999;
    }
    header .header-return {
        width: 100%;
        height:1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    header .header-return .iconfont {
        height: .85rem;
        width: .85rem;
        line-height: .85rem;
        border-radius: 50%;
        margin: 0 .2rem;
        color: #fff;
        font-size: 0.50rem;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .header-bar {
        background-color: #FFF;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .50rem;
        height:1.2rem;
    }
    .header-bar span {
        padding: 0 .2rem;
    }
    .header-bar i {
        padding: 0 .2rem;
        font-size: 0.50rem;
    }

    .swiper-main{
        position: relative;
        width: 100%;
        height: 10rem;
    }
    .swiper-container{
        width: 100%;
        height: 10rem;
    }
    .swiper-container img{
        width: 100%;
        height: 10rem;
    }
    .swiper-pagination{
        bottom: .2rem;
        width: 100%;
        text-align: right;
        color: #000;
        font-size: .5rem;
    }
    ::v-deep.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
        right: -1rem;
    }

    .goods-name {
        padding: .4rem .2rem;
        border-bottom: 1px solid #CCC;
    }
    .goods-name h1{
        font-size: 0.53rem;
        font-weight: 500;
    }
    .goods-name div{
        padding: .06rem 0;
        font-size: 0.37rem;
        color: #999;
    }

    .goods-price {
        padding: .4rem .2rem;
    }
    .goods-price .oprice {
        color: red;
    }
    .goods-price .pprice {
        color: #999;
        font-size: .44rem;
    }


    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        height: 1.4rem;
    }
    footer .footer-left {
        width: 50%;
        display: flex;
        background-color: #FFF;
        
    }
    footer .footer-left li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.33%;
    }

    footer .footer-left li i{
        font-size: .55rem;
    }
    footer .footer-left li span{
        font-size: 0.45rem;
    }

    footer .footer-right {
        width: 50%;
        display: flex;
    }

    footer .footer-right {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1.4rem;
    }
    footer .footer-right div:first-child{
        width: 50%;
        font-size: .45rem;
        text-align: center;
        background-color: #F0892D;
        height: 1.4rem;
        padding-left: .2rem;
    }
    footer .footer-right div:last-child{
        font-size: .45rem;
        width: 50%;
        text-align: center;
        background-color: aquamarine;
        background-color: #DA3926;
        height: 1.4rem;
    }
</style>